<template>
  <div class="content">
    <div class="card_header">智联器管理</div>
    <div class="card_form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="类型">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据状态">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="智联器编号">
          <el-input
            v-model="formInline.user"
            placeholder="智联器编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="formInline.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="onSubmit"
            >查询</el-button
          >
          <el-button type="default" :icon="Refresh" @click="onSubmit"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card_table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        border
        stripe
      >
        <el-table-column
          label="智联器编号"
          prop="id"
          align="center"
          width="120"
        >
          <template #default="scope">
            <div @click="onDetail">
              {{ scope.row.id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type" align="center" width="120" />
        <el-table-column label="状态" align="center" width="120">
          <template #default="scope">
            <div v-if="scope.row.status == 0">
              <el-tag type="info">离线</el-tag>
            </div>
            <div v-if="scope.row.status == 1">
              <el-tag type="success">在线</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="电表数量" prop="total" align="center" />
        <el-table-column
          label="在线电表数量"
          sortable
          prop="online_total"
          align="center"
        />
        <el-table-column
          label="离线电表数量"
          sortable
          prop="offline_total"
          align="center"
        />
        <el-table-column
          label="关闭电表数量"
          sortable
          prop="close_total"
          align="center"
        />
        <el-table-column
          label="创建日期"
          sortable
          prop="createDate"
          align="center"
        />
        <el-table-column
          label="最后通信时间"
          prop="communicationDate"
          align="center"
        />
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template #default>
            <el-button link type="primary" size="small" @click="onDetail">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 30%; position: absolute; bottom: 30px; right: 80px">
        <el-pagination background layout="prev, pager, next" :total="100" />
      </div>
    </div>
    <el-drawer v-model="detailShow" :show-close="false" size="50%">
      <template #header="{ close, titleId, titleClass }">
        <div
          @click="close"
          :id="titleId"
          :class="titleClass"
          class="titleClass_electric"
        >
          <el-icon color="#409eff"><ChatLineSquare /></el-icon>
          <span> 详情 </span>
        </div>
      </template>
      <div class="card_details">
        <div class="card_box">
          <div class="card_header">基本信息</div>
          <div class="card_box_descriptions">
            <el-descriptions class="margin-top" :column="2" :size="size" border>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <user />
                    </el-icon>
                    智联器编号
                  </div>
                </template>
                SZ.DJK.031
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <iphone />
                    </el-icon>
                    智联器类型
                  </div>
                </template>
                真实
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <location />
                    </el-icon>
                    数据状态
                  </div>
                </template>
                在线
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <tickets />
                    </el-icon>
                    最后一次连接时间
                  </div>
                </template>
                2025-02-06 16:34:33
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="card_box">
          <div
            class="card_header"
            style="
              background: linear-gradient(
                90deg,
                #67c23a,
                rgb(209.4, 236.7, 195.9),
                rgba(44, 166, 224, 0)
              );
            "
          >
            关联信息
          </div>
          <div class="card_box_descriptions">
            <el-scrollbar max-height="300px">
              <el-table
                :data="tableData"
                style="width: 100%"
                :default-sort="{ prop: 'date', order: 'descending' }"
                border
                stripe
                height="300"
              >
                <el-table-column
                  label="电表号"
                  prop="id"
                  align="center"
                  width="120"
                >
                  <template #default="scope">
                    <div>
                      {{ scope.row.id }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="房间号"
                  prop="type"
                  align="center"
                  width="120"
                />
                <el-table-column label="电表状态" align="center" width="120">
                  <template #default="scope">
                    <div v-if="scope.row.status == 0">
                      <el-tag type="info">离线</el-tag>
                    </div>
                    <div v-if="scope.row.status == 1">
                      <el-tag type="success">在线</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="租户" prop="total" align="center" />
                <el-table-column
                  label="备注"
                  prop="online_total"
                  align="center"
                />
              </el-table>
            </el-scrollbar>
          </div>
        </div>
        <div class="card_box">
          <div
            class="card_header"
            style="
              background: linear-gradient(
                90deg,
                #909399,
                rgb(232.8, 233.4, 234.6),
                rgba(44, 166, 224, 0)
              );
            "
          >
            操作日志
          </div>
          <div class="card_box_descriptions">
            <el-scrollbar max-height="200px">
              <ul class="log">
                <li style="font-size: 14px">
                  <span style="padding-right: 20px">2025/02/07 16:42:11</span>
                  <span style="padding-right: 20px"
                    ><el-icon><More /></el-icon
                  ></span>
                  <span style="padding-right: 20px">运维</span>

                  <span style="padding-right: 20px; color: #909399"
                    >新增采集设备:SZ.DJK.031</span
                  >
                </li>
                <li style="font-size: 14px">
                  <span style="padding-right: 20px">2025/02/07 16:42:11</span>
                  <span style="padding-right: 20px"
                    ><el-icon><More /></el-icon
                  ></span>
                  <span style="padding-right: 20px">运维</span>

                  <span style="padding-right: 20px; color: #909399"
                    >新增采集设备:SZ.DJK.031</span
                  >
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
  
<script  setup>
import { ChatLineSquare, Search, Refresh, More } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";

const formInline = reactive({
  user: "",
  region: "",
  date: "",
});
const detailShow = ref(false);
const tableData = ref([
  {
    id: "001",
    type: "TCP/IP",
    status: "1",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "002",
    type: "TCP/IP",
    status: "1",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "003",
    type: "TCP/IP",
    status: "0",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "004",
    type: "TCP/IP",
    status: "0",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "005",
    type: "TCP/IP",
    status: "1",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "006",
    type: "TCP/IP",
    status: "0",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "007",
    type: "TCP/IP",
    status: "1",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "008",
    type: "TCP/IP",
    status: "0",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "009",
    type: "TCP/IP",
    status: "0",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
  {
    id: "010",
    type: "TCP/IP",
    status: "0",
    total: "10",
    online_total: "8",
    offline_total: "2",
    close_total: "1",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
]);
const onDetail = () => {
  detailShow.value = !detailShow.value;
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}
.content {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
}
.card_header {
  background: linear-gradient(
    90deg,
    #409eff,
    rgba(44, 166, 224, 0.2),
    rgba(44, 166, 224, 0)
  );
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 15px 20px;
  color: #fff;
}
.card_form {
  // width: 80%;
  padding: 20px 20px;
  padding-top: 40px;
  // margin-bottom:20px;
}
.demo-form-inline {
  .el-input {
    --el-input-width: 160px;
  }
  .el-select {
    --el-select-width: 160px;
  }
}
.card_table {
  padding: 60px 20px;
  padding-bottom: 100px;
  position: relative;
}
.card_box {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
  margin-bottom: 25px;
}
.card_box_descriptions {
  padding: 15px;
}
.log > li {
  margin-bottom: 15px;
}
:deep(.el-table__header .el-table__cell) {
  background: #409eff !important;
  color: #fff;
}
:deep(.el-table .ascending .sort-caret.ascending) {
  border-bottom-color: #fff !important;
}
:deep(.el-table .descending .sort-caret.descending) {
  border-top-color: #fff !important;
}
:deep(.el-table__row td:first-child:hover) {
  color: #409eff;
  cursor: pointer;
}
:deep(.el-form) {
  height: 45px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0;
}
</style>